<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MUAHANG.NET - Options</title>
<link href='../../css/reset.css' rel='stylesheet' type='text/css' />
<link href='../../css/960.css' rel='stylesheet' type='text/css' />
<link href='../../css/text.css' rel='stylesheet' type='text/css' />
<link href='../../css/text.css' rel='stylesheet' type='text/css' />
<link href='../../css/black/ui.css' rel='stylesheet' type='text/css' />
<link href='../../backend/css/styles.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript"> var base_url = "http://localhost/muahang.net/", base_path = "/muahang.net/";</script>
<style type="text/css">
<!--
	#product_options > li {padding: 10px 0}
	#product_options ul {margin-bottom: 0}
	#product_options ul > li {padding: 5px 0}
	#product_options a:link,#product_options a:active,#product_options a:visited {font: bold italic 11px Arial;}
-->
</style>
</head>
<body>
<div class="container_12" id="body">
<div class="grid_12">
	<button id="btn_add_option">Thêm tùy chọn</button>
	<button id="btn_submit">Submit</button>
<br /><br />
</div>
<div class="clear"></div>
<div class="grid_12">
<form action="" method="post">
	<ul id="product_options">
		<li id="option_0"><b>Màu sắc</b>
			[ <a href="#" class="add_value">Thêm</a> | <a href="#" class="edit_option">Sửa</a> | <a href="#" class="remove_option">Xóa</a> ]
			<input type="hidden" name="option[0][name]" value="Màu sắc"> 
			<ul id="option_0_values">
				<li id="option_0_0">Xanh 
					[ <a href="#" class="edit_value">Sửa</a> | <a href="#" class="remove_value">Xóa</a> ]
					<input type="hidden" name="option[0][value][0][name]" value="Xanh">
					<input type="hidden" name="option[0][value][0][quantity]" value="2">
				</li>
				<li id="option_0_1">Đỏ 
					[ <a href="#" class="edit_value">Sửa</a> | <a href="#" class="remove_value">Xóa</a> ]
					<input type="hidden" name="option[0][value][1][name]" value="Đỏ">
					<input type="hidden" name="option[0][value][1][quantity]" value="3">
				</li>
				<li id="option_0_2">Vàng 
					[ <a href="#" class="edit_value">Sửa</a> | <a href="#" class="remove_value">Xóa</a> ]
					<input type="hidden" name="option[0][value][2][name]" value="Vàng">
					<input type="hidden" name="option[0][value][2][quantity]" value="5">
				</li>
			</ul>
		</li>
		<li id="option_1"><b>Kích cỡ</b>
			[ <a href="#" class="add_value">Thêm</a> | <a href="#" class="edit_option">Sửa</a> | <a href="#" class="remove_option">Xóa</a> ]
			<input type="hidden" name="option[1][name]" value="Kích cỡ">
			<ul id="option_1_values">
				<li id="option_1_0">S
					[ <a href="#" class="edit_value">Sửa</a> | <a href="#" class="remove_value">Xóa</a> ]
					<input type="hidden" name="option[1][value][0][name]" value="S">
					<input type="hidden" name="option[1][value][0][quantity]" value="2">
				</li>
				<li id="option_1_1">M
					[ <a href="#" class="edit_value">Sửa</a> | <a href="#" class="remove_value">Xóa</a> ]
					<input type="hidden" name="option[1][value][1][name]" value="M">
					<input type="hidden" name="option[1][value][1][quantity]" value="2">
				</li>
				<li id="option_1_2">L
					[ <a href="#" class="edit_value">Sửa</a> | <a href="#" class="remove_value">Xóa</a> ]
					<input type="hidden" name="option[1][value][2][name]" value="L">
					<input type="hidden" name="option[1][value][2][quantity]" value="2">
				</li>
			</ul>
		</li>
	</ul>
</form>
</div>
<div class="clear"></div>
</div>
<div id="dlg_option" style="display: none;"><input type="text" id="product_option" name="product_option" class="input ui-corner-all" style="width: 300px" /></div>
<div id="dlg_value" style="display: none;">
	<div>
		<label for="product_value_name" style="width: 80px">Giá trị</label>
		<input type="text" id="product_value_name" name="product_value_name" class="input ui-corner-all" style="width: 200px" />
		<div class="clear"></div>
	</div>
	<div>
		<label for="product_value_quantity" style="width: 80px">Số lượng</label>
		<input type="text" id="product_value_quantity" name="product_value_quantity" class="input ui-corner-all" style="width: 200px" />
		<div class="clear"></div>
	</div>
</div>
<script type="text/javascript">
$(function() {
	var poid = $('#product_options > li').length;
	var vlid = new Array();
		
	$('button').button();
	
	$("#dlg_option:ui-dialog, #dlg_value:ui-dialog").dialog( "destroy");
	$("#dlg_option").dialog({
		autoOpen: false,
		width: 350,
		modal: true,
		title: 'Thêm tùy chọn',	
		close: function() {
			$('#product_option').val("");
		}
	});
	
	$("#dlg_value").dialog({
		autoOpen: false,
		width: 350,
		modal: true,
		title: 'Thêm giá trị',		
		close: function() {
			$('#product_value_name, #product_value_quantity').val("");
		}
	});
	
	$('#product_option,#product_value_name, #product_value_quantity').live('keypress', function(e) {
		if(e.keyCode == 13) $('.ui-dialog').find('button:first').trigger('click');
	});
	
	$('#btn_add_option').click(function() {
		$("#dlg_option").dialog("option", "buttons", {
			'OK': function() {
				var name = $('#product_option').val();
				if(name.length == 0) {
					name = 'Tùy chọn '+poid;
				}
				var li = '<li id="option_'+poid+'"><b>'+name+'</b>'
					+' [ <a href="#" class="add_value">Thêm</a> |'
					+' <a href="#" class="edit_option">Sửa</a> |'
					+' <a href="#" class="remove_option">Xóa</a> ]'
					+' <input type="hidden" name="option['+poid+'][name]" value="'+name+'" /></li>';
				$('#product_options').append(li);
				$('ul').sortable({ placeholder: "ui-state-highlight"});
				poid = poid + 1;
				$(this).dialog('close');
			},
			Cancel: function() {
				$(this).dialog('close');
			}
		}).dialog("open");
	});
	
	$('ul').sortable({ placeholder: "ui-state-highlight"});
	
	$('.remove_value,.remove_option').live('click', function() {
		$(this).parent('li').remove();
		return false;
	});
	
	$('#btn_submit').click(function() {
		$.post(base_path+'welcome/post', $('form').serialize(), function(data) {
			console.log(data);
		});
	});
	
	$('.edit_value').live('click', function() {
		var s = $(this);
		var p = s.parent('li');
		var n = s.siblings('input:first');
		var q = s.siblings('input:eq(1)');

		$('#product_value_name').val(n.val());
		$('#product_value_quantity').val(q.val())
		
		$("#dlg_value").dialog("option", "buttons", { 
			'OK' : function() {
				var name = $('#product_value_name').val(), quantity = $('#product_value_quantity').val();
				
				if(name.length == 0) {
					alert('Hãy điền đủ giá trị');
				} else {
					var li = '<li id="'+p.attr('id')+'">'+name
						+' [ <a href="#" class="edit_value">Sửa</a> |'
						+' <a href="#" class="remove_value">Xóa</a> ]'
						+' <input type="hidden" name="'+n.attr('name')+'" value="'+name+'" />'
						+' <input type="hidden" name="'+q.attr('name')+'" value="'+quantity+'" /></li>';
					p.replaceWith(li);
					$('ul').sortable({ placeholder: "ui-state-highlight"});
					$("#dlg_value").dialog('close');
				}
			},
			Cancel : function() {
				$("#dlg_value").dialog('close');
			}
		}).dialog("open");
		return false;
	});
	
	$('.edit_option').live('click', function() {
		var s = $(this);
		var b = s.siblings('b');
		var p = s.parent('li');
		var n = s.siblings('input');
		
		$('#product_option').val(n.val());
		
		$("#dlg_option").dialog("option", "buttons", { 
			'OK' : function() {
				var name = $('#product_option').val();
				if(name.length == 0) {
					alert('Hãy điền đủ giá trị');
				} else {
					b.text(name);
					n.val(name);
					$('ul').sortable({ placeholder: "ui-state-highlight"});
					$("#dlg_option").dialog('close');
				}
			},
			Cancel : function() {
				$("#dlg_option").dialog('close');
			}
		}).dialog("open");
		return false;
	});
	
	$('.add_value').live('click', function() {
		var id = $(this).parent('li').attr('id').substr(7);
		if(typeof vlid[id] == "undefined") {
			vlid[id] =  $('#option_'+id+'_values li').length;
		}
		
		$("#dlg_value").dialog("option", "buttons", { 
			'OK' : function() {
				var name = $('#product_value_name').val(), quantity = $('#product_value_quantity').val()
				if(name.length == 0) {
					alert('Hãy điền đủ giá trị');
				} else {
					var li = '<li class="option_'+id+'_'+vlid[id]+'">'+name
						+' [ <a href="#" class="edit_value">Sửa</a> | <a href="#" class="remove_value">Xóa</a> ]'
						+'<input type="hidden" name="option['+id+'][value]['+vlid[id]+'][name]" value="'+name+'" />'
						+'<input type="hidden" name="option['+id+'][value]['+vlid[id]+'][quantity]" value="'+quantity+'" /></li>';
					$('#option_'+id+'_values').append(li);
					$('ul').sortable({ placeholder: "ui-state-highlight"});
					vlid[id] = vlid[id] + 1;
					$("#dlg_value").dialog('close');
				}
			},
			Cancel : function() {
				$("#dlg_value").dialog('close');
			}
		})
		.dialog("open");
		return false;
	});
});
</script>
</body>